<template>
	<view>
		<view class="top">
			<view class="top-title">
				{{mendian | formatMd}}
			</view>
			<view class="top-content">
				{{start}}至{{end}}
			</view>
		</view>
		
		<view class="dropdown">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="综合排序" :options="options1" @change="paixu"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="品牌" :options="options2" @change="brand"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="价格" :options="options3"></u-dropdown-item>
				<!-- <u-dropdown-item v-model="value4" title="更多" :options="options4"></u-dropdown-item> -->
			</u-dropdown>
		</view>
		
		<view class="scroll">
			<view class="left">
				<view 
					class="left-item" 
					:class="{ categoryNameActive: index == categoryNameActive }"
					tabindex="1" 
					v-for="(item,index) in typeList" 
					:key="index" 
					@click="onclickType(index)">
					{{item}}
				</view>
			</view>
			<view class="right">
				<scroll-view 
					:scroll-top="scrollTop" 
					scroll-y="true" 
					class="scroll-Y" 
				>
					<view v-if="HireList== ''" class="">
						<u-empty text="类型车辆为空" mode="list"></u-empty>
					</view>
					<view class="car" v-for="(item,index) in HireList" :key="index">
						<view class="car-content" >
							<view class="car-left">
								<image :src="item.product_img" mode=""></image>
							</view>
							<view v-if="item.carstatus == 1" class="car-right">
								<view class="right-name">
									{{item.name}}
								</view>
								<view class="right-detail">
									{{item.gearbox}}/{{item.fuel}}/{{item.emission}}/{{item.seat}}
								</view>
							</view>
							<view v-if="item.carstatus == 0" class="car-right" @click="confirmOrder(mendian,start,end,item.id)">
								<view class="right-name">
									{{item.name}}
								</view>
								<view class="right-detail">
									{{item.gearbox}}/{{item.fuel}}/{{item.emission}}/{{item.seat}}
								</view>
							</view>
						</view>
						<view class="car-buttom">
							<view class="but-left" >
								<view class="" v-if="item.carstatus == 0" @click="carDetail(item.id)">
									车辆详情 >
								</view>
								<view v-if="item.carstatus == 1" class="" style="color: red;">
									已租满
								</view>
							</view>
							<view class="but-right">
								<view class="rig-left">
									￥{{item.price}}
								</view>
								<view class="rig-right">
									/均价
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendian: 0,
				start: '',
				end: '',
				value1: 1,
				value2: 2,
				value3: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '价格从高到低',
						value: 2,
					},
					{
						label: '价格从低到高',
						value: 3,
					}
				],
				options2: [{
						label: '丰田',
						value: 6,
					},
					{
						label: '本田',
						value: 10,
					},
				],
				options3: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				typeList: [],
				HireList: [],
				categoryNameActive: 0, //当前选中active
				paixuValue: 1,
				brandid: 0,
				scrollTop: 0,
			}
		},
		onLoad(option) {
			let testArray = JSON.parse(decodeURIComponent(option.item))
			this.mendian = testArray.stoid
			this.start = testArray.start
			this.end = testArray.end
			this.getTypeList()
			this.onclickType(0)
		},
		methods: {
			carDetail(id) {
				uni.navigateTo({
					url: '/pagesC/productHire/productHire?id=' + id
				})
			},
			confirmOrder(mendian,start,end,id) {
				console.log(mendian,start,end,id)
				let testArra = {
					stoid: mendian,
					start: start,
					end: end,
					id: id
				};
				let testStr = encodeURIComponent(JSON.stringify(testArra));
				uni.navigateTo({
					url: '/pagesC/confirmOrder/confirmOrder?item=' + testStr
				})
			},
			paixu(e){
				this.paixuValue = e
				this.onclickType(this.categoryNameActive)
			},
			brand(e){
				this.brandid = e
				this.onclickType(this.categoryNameActive)	
			},
			onclickType(index) {
				this.categoryNameActive = index;
				uni.request({
					url: uni.getStorageSync('URL') + 'home/hire/Hire/getHireList',
					method: 'POST',
					data: {
						htypeid: this.categoryNameActive,
						stoid: this.mendian,
						paixu: this.paixuValue,
						brand_id: this.brandid
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.HireList = res.data.data
					}
				})
			},
			getTypeList() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/hire/Hire/getHireType',
					method: 'GET',
					data: {
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.typeList = res.data.data
					}
				})
			}
		},
		filters: {
			formatMd: function(str) {// 格式化科室
				const Md = {
					"2": "拱北店",
					"1": "香洲店",
					"0": "请选择门店"
				}
				return Md[str];
			},
		},
	}
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
.top{
	width: 100%;
	background-color: #ffffff;
	height: 120rpx;
	text-align: center;
	.top-title{
		font-size: 30rpx;
	}
	.top-content {
		margin-top: 30rpx;
		font-size: 30rpx;
	}
}
.dropdown {
	width: 100%;
	background-color: #ffffff;
}
.scroll{
	display: flex;
	.left {
		height: 100%;
		width: 25%;
		background-color: #ffffff;
		text-align: center;
		.left-item {
			height: 90rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center; /* 垂直居中 */
			justify-content: center; /* 水平居中 */
		}
		// .left-item:focus {
		// 	color: blue;
		// }
	}
	.right{
		width: 75%;
		height: 100%;
		.car{
			background-color: #ffffff;
			width: 90%;
			height: auto;
			margin: 15px auto;
			padding: 15rpx;
			border-radius: 30rpx;
			box-shadow: 0px 5px 10px 0px #56325d;
			.car-content {
				display: flex;
				.car-left{
					width: 40%;
					height: 100px;
					image{
						height: 100%;
						width: 100%;
					}	
				}
				.car-right {
					width: 60%;
					height: 100px;
					padding: 10rpx;
					.right-name{
						font-size: 35rpx;
						font-weight: bold;
					}
					.right-detail {
						margin-top: 20rpx;
						color: #9a9a9a;
					}
				}
			}
			.car-buttom {
				margin-top: 15rpx;
				height: 30px;
				line-height: 30px;
				display: flex;
				justify-content: space-between;
				.but-right{
					display: flex;
					.rig-left {
						color: red;
						font-size: 35rpx;
					}
				}
			}
		}
	}
}
.categoryNameActive {
	color: blue;
}
.scroll-Y {
	height: 1200rpx;
}
</style>
